import { Button, Form, Input, Select, Space } from "antd";
import { type Category } from "../../../../types/content/category";
interface IProps {
  onChange: (form: Category.Query) => void;
}
export default function QueryForm({ onChange }: IProps) {
  const [form] = Form.useForm();
  return (
    <Form
      layout="inline"
      name="categoryQuery"
      onFinish={(form) => {
        onChange(form);
      }}
      autoComplete="off"
    >
      <Form.Item<Category.Query> label="名称" name="name">
        <Input allowClear size="middle"/>
      </Form.Item>
      <Form.Item<Category.Query> label="状态" name="status">
        <Select style={{ width: 200 }} allowClear size="middle">
          <Select.Option value="0">正常</Select.Option>
          <Select.Option value="1">禁用</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit" size="middle">
            查询
          </Button>
          <Button
            htmlType="button"
            size="small"
            onClick={() => {
              form.resetFields();
              form.submit();
            }}
          >
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
}
